import React, { FC } from 'react';
import './css/style.css'
//ToToP
import ToTop from '../../../components/ToTop'
//定
import { Anchor } from 'antd';
//走马灯
import { Carousel } from 'antd';
//推荐阅读
import Recommend_dom from '../../../components/Recommend/Recommend_dom';
//文章标签
import TagsSon from '../../../components/Tags/TagsSon';
import {RoutesItem} from '../../../utils/index'
import {NavLink} from 'react-router-dom'
import RouteView from '../../../router/RouteView'

interface Myprops {
    routes: Array<RoutesItem>
  }


const Paper:FC<Myprops > = (props) => {

    let { routes } = props


    //走马灯样式
    const contentStyle: any = {
        height: '312px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
    };

    return (
        <div className='paperd'>
            <div className="lef_body">
                {/* 轮播（走马灯） */}
                <div className="swiper_dom">
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>1</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>2</h3>
                        </div>
                    </Carousel>
                </div>

                {/* 三级路由区域 */}
                <div className="three_body">
                    {/* 三级导航 */}
                    <div className="top_body">
                        {/* ///////////////////////////////////////// */}
                        <ul>
                            {
                                routes.filter(item => item.name).map((item, index) => {
                                    return <li key={index} >
                                        <NavLink to={item.path || ''}>
                                            {item.name}
                                        </NavLink>
                                    </li>
                                })
                            }
                        </ul>
                        {/* //////////////////////////////////////// */}
                    </div>
                    {/* 内容区域 */}
                    <div className="botm_body">
                        <RouteView routes={routes}></RouteView>
                    </div>
                </div>
            </div>

            <Anchor>
                <div className="rig_body">
                    {/* 推荐阅读 */}
                    <div className='recomd_dom'>
                        <Recommend_dom />
                    </div>
                    {/* 文章标签 */}
                    <div>
                        <TagsSon />
                    </div>
                </div>
            </Anchor>

            {/* 返回顶部 */}
            <ToTop />
        </div>
    )
}


export default Paper
